<template>
	<view>
		<view class="evalu">
			<view class=" xflex-x">
				<view class="">
					酒店评价
				</view>
				<u-rate :count="count" v-model="info.star"></u-rate>
			
			</view>
			
			<view class="">
				<u--textarea v-model="info.content" placeholder="请输入内容" border="bottom"></u--textarea>
			</view>
			
			<view class="imgs xmt24">
				 <view class="img pr" v-for="(item,index) in labelData.imglist" :key="index">
				 	<image class="img" v-if="item.type == 'img'" :src="item.fullurl" mode=""></image>
				 
				 	<video class="img" v-if="item.type == 'mp4'" :src="item.fullurl"></video>
				 	<image class="pa shanchu" @click="deleti(index)" src="/static/image/car/shanchux.png" mode="">
				 	</image>
				 </view>
				 <image class="img" @click="chooseImage()" src="/static/image/mine/img.png" mode=""></image>
				 <image class="img" @click="chooseVideo()" src="/static/image/mine/video.png" mode=""></image>
			</view>
		</view>
		
		<view class="btn" @click="sub()">
			提交
		</view>


	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		uploadFile,
		addarticle,
		commentorder
	} from "@/network/home.js"
	let value = ref(4)
	let count = ref(5)
	
	onLoad((option) => {
		info.id = option.id
		
	})
	
	let info = reactive({
		star:0,
		content:'',
		images:[]
	})
	let labelData = reactive({
		value: '',
		show: false,
		imglist: []
	})
	// 上传视频
	const chooseVideo = () => {
		uni.chooseVideo({
			success: async function(chooseVideoRes) {
				const tempFilePath = chooseVideoRes.tempFilePath;
				const result = await uploadFile(tempFilePath);
				labelData.imglist.push({
					...result.data,
					type: 'mp4'
				})
				// 这里获取到了视频的临时文件路径，可以进行后续的上传操作  
			}
		});
	}
	
	
	// 上传图片
	
	const chooseImage = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);
	
					labelData.imglist.push({
						...result.data,
						type: 'img'
					})
				}
			}
		});
	}
	
	
	// 删除
	const deleti = (index) => {
	
		console.log(index);
		labelData.imglist.splice(index, 1)
	}
	
	// 删除标签
	const deletelab = (index) =>{
		info.label.splice(index,1)
	}
	// 选择地址
	const getlocatch = () =>{
		uni.chooseLocation({
			success(res) {
				console.log(res);
				info.address = res.name
				// counter.enterInfo.lat = res.latitude
				// counter.enterInfo.lng = res.longitude
				// counter.enterInfo.address = res.address
				// counter.enterInfo.addressname  = res.name
			}
		})
	}
	
	const sub = () =>{
		labelData.imglist.forEach(item=>{
			console.log(item);
			info.images.push(item.url)
		})
		commentorder(info).then(res=>{
			uni.showToast({
				icon:"none",
				title:'评价成功'
			})
			setTimeout(()=>{
				uni.redirectTo({
					url:'/pages/mine/order/myOrder?type=5'
				})
			},1000)
			
		})
	}
	
	
	
	
</script>


<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style>
	.evalu {
		background-color: #fff;
		padding: 38rpx 36rpx;
		box-sizing: border-box;
	}
	
	
	.imgs {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.img {
		width: 214rpx;
		height: 214rpx;
	}
	
	
	.btn {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 30rpx auto;
	}
	.shanchu {
		width: 37rpx;
		height: 36rpx;
		right: 0;
	}
	
</style>